<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="120px"
    status-icon
    label-position="top"
  >
    <el-form-item label="预计入职日期：" prop="joinTime">
      <el-date-picker v-model="form.joinTime" type="date" style="width: 100%" />
    </el-form-item>

    <el-form-item label="期望薪资：" prop="expectedSalary">
      <el-input
        v-model="form.expectedSalary"
        style="width: 100%"
        @input="validateNumber"
      />
    </el-form-item>

    <el-form-item label="最终薪资：" prop="finalSalary">
      <el-input
        v-model="form.finalSalary"
        style="width: 100%"
        @input="finalSalaryNumber"
      />
    </el-form-item>

    <el-form-item label="offer状态：" prop="offerStatus">
      <el-radio-group v-model="form.offerStatus">
        <el-radio :value="0">
          <div class="result">接受</div>
        </el-radio>
        <el-radio :value="1">
          <div class="no">拒接</div>
        </el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="是否入职：" prop="isJoin" v-if="form.offerStatus == 0">
      <el-radio-group v-model="form.isJoin">
        <el-radio :value="0">
          <div class="result">是</div>
        </el-radio>
        <el-radio :value="1">
          <div class="no">否</div>
        </el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      label="备注："
      prop="remarks"
      v-if="form.offerStatus == 0 && form.isJoin == 0"
    >
      <el-input
        v-model="form.remarks"
        type="textarea"
        placeholder="请输入"
        maxlength="300"
        show-word-limit
        rows="4"
      />
    </el-form-item>

    <el-form-item
      label="录用通知："
      prop="hireFile"
      v-if="form.offerStatus == 0 && form.isJoin == 0"
    >
      <Upload
        :modelValue="form.hireFile"
        :isShowTip="false"
        @update:modelValue="uploadFiles"
        @delete="handleFileDelete"
      ></Upload>
    </el-form-item>

    <div style="text-align: right; margin-top: 20px">
      <el-button @click="handleCancel">取消</el-button>
      <el-button @click="handleSave">保存</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </el-form>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";

import Upload from "@/components/FileUpload/index.vue";
const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["submit"]);

const formRef = ref(null);
const fileList = ref([]);
const form = reactive({
  joinTime: "",
  expectedSalary: "",
  finalSalary: "",
  offerStatus: "",
  isJoin: "",
  remarks: "",
  notificationFile: null,
});

// 验证规则
const rules = reactive({
  joinTime: [
    { required: true, message: "请选择预计入职日期", trigger: "change" },
  ],
  expectedSalary: [
    { required: true, message: "请输入期望薪资", trigger: "blur" },
  ],
  finalSalary: [{ required: true, message: "请输入最终薪资", trigger: "blur" }],
  offerStatus: [
    { required: true, message: "请选择offer状态", trigger: "change" },
  ],
  isJoin: [{ required: true, message: "请选择是否入职", trigger: "change" }],
  remarks: [{ max: 300, message: "最多输入300个字符", trigger: "blur" }],
});

// 监听初始数据变化
watch(
  () => props.initialData,
  (newVal) => {
    if (newVal) {
      Object.assign(form, newVal);
      if (newVal.notificationFile) {
        fileList.value = [
          {
            name: newVal.notificationFile.name,
            url: newVal.notificationFile.url,
          },
        ];
      }
    }
  },
  { immediate: true, deep: true }
);

const uploadFiles = (files) => {
  form.hireFile = files;
};
const handleFileDelete = (updatedFiles) => {
  // userInfoForm.saveTransferFileVos=updatedFiles;

  form.hireFile = updatedFiles;
};
// 处理文件上传

// 提交表单
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emit("submit", { ...form });
    } else {
      ElMessage.error("请填写信息");
      return false;
    }
  });
};

// 保存表单
const handleSave = () => {
  // save
  formRef.value.validate((valid) => {
    if (valid) {
      emit("save", { ...form });
    } else {
      ElMessage.error("请填写信息");
      return false;
    }
  });
};

// 取消表单
const handleCancel = () => {
  Object.assign(form, props.initialData);
  emit("cancel", { ...form });
};

// 校验输入是否为纯数字
const validateNumber = (value) => {
  // 使用正则表达式过滤掉非数字字符

  form.expectedSalary = value.replace(/[^0-9]/g, "");
};
const finalSalaryNumber = (value) => {
  // 使用正则表达式过滤掉非数字字符

  form.finalSalary = value.replace(/[^0-9]/g, "");
};
</script>

<style scoped>
.el-form {
  max-width: 600px;
  margin: 10px;
}
</style>
